<script setup lang="ts">
import { OrderApi } from '@/apis'
import dayjs from 'dayjs'
import OrderCountStatChart from './OrderCountStatChart.vue'
import OrderPriceStatChart from './OrderPriceStatChart.vue'

const loading = ref(true)
const today = dayjs()
const query = {
  dateFrom: today.add(-10, 'day').format('YYYY-MM-DD'),
  dateTo: today.format('YYYY-MM-DD'),
}
const orderRecentStat = ref<OrderApi.OrderRecentStatResp>()
const getOrderRecentStat = () => {
  loading.value = true
  OrderApi.getOrderRecentStat(query).then((res) => {
    orderRecentStat.value = res
  }).finally(() => {
    loading.value = false
  })
}
onMounted(() => {
  getOrderRecentStat()
})
</script>

<template>
  <a-grid :cols="24" :col-gap="12" :row-gap="12">
    <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
      <OrderCountStatChart :loading="loading" :data="orderRecentStat?.orderCountStat" />
    </a-grid-item>
    <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
      <OrderPriceStatChart :loading="loading" :data="orderRecentStat?.orderPriceStat" />
    </a-grid-item>
  </a-grid>
</template>

<style scoped>

</style>
